<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://cdn.bootcss.com/antd-mobile/2.1.10/antd-mobile.min.css"
    />
    <link
      rel="stylesheet"
      href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link
      rel="stylesheet"
      href="https://cdn.bootcdn.net/ajax/libs/antd/4.10.3/antd.min.css"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
    />
    <style>
      #circle_box {
        width: 150px;
        height: 150px;
        margin: 0px 0 0 0px;
        border-radius: 50%;
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0px 0px 11px 1px rgba(230, 230, 230, 0.9);
      }
      #circle_position {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      span::before {
        position: absolute;
        height: 39%;
        content: '\f130';
        overflow: hidden;
        color: #1c7cd4;
        z-index: 999;
        font-size: 85px;
      }
      #microphone {
        font-size: 85px;
        color: #0e31fa;
      }
      #circle_box.shame {
        background-color: #cac7c7;
        height: 0px;
      }
      #circle_box.animation {
        animation: slideshow 1.5s linear infinite;
      }
      @keyframes slideshow {
        0% {
          width: 200px;
        }
        30% {
          width: 150px;
        }
        90% {
          width: 100px;
        }
        120% {
          width: 150px;
        }
        180% {
          width: 200px;
        }
      }
      .ant-drawer-body {
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.1/umd/react.development.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.1/umd/react-dom.development.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/antd/4.10.3/antd.min.js"></script>
    <script src="https://cdn.bootcss.com/antd-mobile/2.1.10/antd-mobile.min.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
      const { Component, useState, useEffect, useRef } = React
      const { Button, Drawer } = antd

      function SpeechBox(props) {
        const btnElem = useRef()
        const [position, setPosition] = useState({ clientX: 0, clientY: 0 })
        const [isChangeBackground, setIsChangeBackground] = useState(false)
        const [isOuterSpeechBox, setIsOuterSpeechBox] = useState(false)
        const [isChangeMask, setIsChangeMask] = useState(true)
        useEffect(() => {
          btnElem.current.addEventListener('touchstart', touchstart, {
            passive: false
          })
          btnElem.current.addEventListener('touchmove', touchmove, {
            passive: false
          })
          btnElem.current.addEventListener('touchend', touchend, {
            passive: false
          })
          return () => {
            btnElem.current &&
              btnElem.current.removeEventListener('touchstart', touchstart, {
                passive: false
              })
            btnElem.current &&
              btnElem.current.removeEventListener('touchmove', touchmove, {
                passive: false
              })
            btnElem.current &&
              btnElem.current.removeEventListener('touchend', touchend, {
                passive: false
              })
          }
        })
        //在 115+165 范围内是
        function setPositionfn(event) {
          const clientX = event.targetTouches[0].clientX
          const clientY = event.targetTouches[0].clientY
          setPosition({ clientX, clientY })
        }
        const touchstart = function (event) {
          event.preventDefault() //阻止浏览器默认行为
          setPositionfn(event)
          const { clientX, clientY } = position
          setIsChangeBackground(true)
        }
        const touchmove = function (event) {
          event.preventDefault() //阻止浏览器默认行为
          const { clientX, clientY } = position
          if (
            clientX > 110 &&
            clientX < 265 &&
            clientY > 458 &&
            clientY < 625
          ) {
            console.log('松开手,发送信息')
            setIsChangeBackground(true)
          } else {
            console.log('松开手,取消发送')
            setIsChangeBackground(false)
            setIsOuterSpeechBox(true)
          }
          setPositionfn(event)
        }
        const touchend = function (event) {
          event.preventDefault()
          setIsChangeBackground(false)
          setIsChangeMask(false)
          setIsOuterSpeechBox(false)
        }

        function handleSpeech(e) {
          e.stopPropagation()
          e.preventDefault()
        }
        const onClose = () => {
          props.onClose()
        }
        return (
          <Drawer
            placement="bottom"
            closable={true}
            onClose={onClose}
            visible={props.visible}
            mask={isChangeMask}
          >
            <div className="animate__animated animate__fadeInUp">
              <Button
                ref={btnElem}
                type="default"
                id="circle_box"
                className={
                  isChangeBackground
                    ? 'shame animation'
                    : isOuterSpeechBox
                    ? 'shame'
                    : ''
                }
                onClick={handleSpeech}
                shape="circle"
              >
                <span className="fa fa-microphone">
                  <i
                    className="fa fa-microphone"
                    id="microphone"
                    aria-hidden="true"
                  ></i>
                </span>
              </Button>
            </div>
          </Drawer>
        )
      }

      function Home() {
        const [visible, setVisible] = useState(false)
        function handleClick() {
          setVisible(true)
        }
        function onClose() {
          setVisible(false)
        }
        return (
          <div>
            <Button type="primary" onClick={handleClick}>
              show
            </Button>
            {visible && (
              <SpeechBox onClose={onClose} visible={visible}></SpeechBox>
            )}
          </div>
        )
      }
      const App = (
        <div>
          <Home></Home>
        </div>
      )
      ReactDOM.render(App, document.getElementById('root'))
    </script>
  </body>
</html>
